import React, { useState, useRef } from "react";
import { useTranslation } from "react-i18next";
import questionIcon from "../../../assets/images/dapp/questionIcon.svg";
import greenUpIcon from "../../../assets/images/dapp/greenUp.png";
import overviewTitle from "../../../assets/images/dapp/overviewTitle.png";
import { Button, Table } from "antd";
import linkIcon1 from "../../../assets/images/ecology/contractAddressIcon1.svg";
import linkIcon2 from "../../../assets/images/ecology/contractAddressIcon2.svg";
import { NoDataComp } from "../../../components/NoData";
import {ETFModalComp} from './ETFModal'
import { useHistory } from "react-router-dom";
function IndexOverview() {
  const { t } = useTranslation();
  const ETFModalRef = useRef();
  const history= useHistory()
  
  const [dataSource, setDataSource] = useState([]);
  const [deviceType, setDeviceType] = useState(
    sessionStorage.getItem("deviceType")
  );

  const [overviewData, setOverviewData] = useState({
    total: "5,734.1793",
    transTotal: "49,534,853.1945",
    rate: "-7.17",
    coin: "ESTD",
    date: "2023-09-12",
    redemption: "228.7619",
    realTime: "1568.9828",
    tvl: "89,877,384.00",
    contractAddress: "ox123s3c…g4df4r",
    apr: "387.00%",
  });

  const columns = [
    {
      title: t("dappIndexoverview.tableTitle1"),
      dataIndex: "name",
      key: "name",
    },
    {
      title: t("dappIndexoverview.tableTitle2"),
      dataIndex: "name",
      key: "name",
    },
    {
      title: t("dappIndexoverview.tableTitle3"),
      dataIndex: "name",
      key: "name",
    },
    {
      title: t("dappIndexoverview.tableTitle4"),
      dataIndex: "name",
      key: "name",
    },
    {
      title: t("dappIndexoverview.tableTitle5"),
      dataIndex: "name",
      key: "name",
    },
    {
      title: t("dappIndexoverview.tableTitle6"),
      dataIndex: "name",
      key: "name",
    },
    {
      title: t("dappIndexoverview.tableTitle7"),
      dataIndex: "name",
      key: "name",
    },
    {
      title: t("dappIndexoverview.tableTitle8"),
      dataIndex: "name",
      key: "name",
    },
    {
      title: t("dappIndexoverview.tableTitle9"),
      dataIndex: "name",
      key: "name",
    },
  ];

  const handleShowETF =() => {
    ETFModalRef.current.open()
  }

  const handleBuy = () => {
    history.push({pathname: "/dapp/deal", query:{type: "buy"}});
  }

  const handleSell = () => {
    history.push({pathname: "/dapp/deal", query:{type: "sell"}});
  }

  return (
    <div className="index-overview-page">
      <div className="top">
        {deviceType === "PC" ? <div className="left"></div> : null}
        <div className="right">
          <div className="header">
            <div className="title-text">{t("home.blockOneTitle")}</div>
            <div className="right-corner" onClick={() => handleShowETF()}>
              {t("dappIndexoverview.topRightCorner")}
              <img src={questionIcon} class="question-icon"></img>
            </div>
          </div>
          <div className="total-data-box">
            <div className="total-text">
              <img src={greenUpIcon} class="trend-icon"></img>
              {overviewData.total}
            </div>
            <div className="trans-row">
              <div className="trans-text">{overviewData.transTotal}</div>
              <div className="time-data">24h: {overviewData.rate}</div>
            </div>
            <div className="data-group">
              <div className="data-row">
                <div className="item-label">{t("dappIndexoverview.coin")}</div>
                <div className="item-value blod-text">{overviewData.coin}</div>
              </div>
              <div className="data-row">
                <div className="item-label">{t("dappIndexoverview.date")}</div>
                <div className="item-value">{overviewData.date}</div>
              </div>
              <div className="data-row">
                <div className="item-label">
                  {t("dappIndexoverview.redemption")}
                </div>
                <div className="item-value">{overviewData.redemption}</div>
              </div>
              <div className="data-row">
                <div className="item-label">
                  {t("dappIndexoverview.realTime")}
                </div>
                <div className="item-value">{overviewData.realTime}</div>
              </div>
              <div className="data-row">
                <div className="item-label">{t("dappIndexoverview.tvl")}</div>
                <div className="item-value">{overviewData.tvl}</div>
              </div>
              <div className="data-row">
                <div className="item-label">
                  {t("dappIndexoverview.contractAddress")}
                </div>
                <div className="item-value origin-text">
                  {overviewData.contractAddress}
                </div>
              </div>
              <div className="data-row">
                <div className="item-label">{t("dappIndexoverview.apr")}</div>
                <div className="item-value blod-text green-text">
                  {overviewData.apr}
                </div>
              </div>
            </div>
            <div className="action-box">
              <Button className="subscribe-btn" onClick={() => handleBuy()}>
                {t("dappIndexoverview.subscribe")}
              </Button>
              <Button className="redemption-btn" onClick={() => handleSell()}>
                {t("dappIndexoverview.redemptionBtn")}
              </Button>
            </div>
          </div>
        </div>
        {deviceType === "Mobile" ? (
          <div className="banner-box">
            <div className="banner-bk">
              <img className="banner-bk-img" src={overviewTitle}></img>
            </div>
            <div className="banner-link-box">
              
            </div>
          </div>
        ) : null}
        {deviceType === "Mobile" ? <div className="left"></div> : null}
      </div>

      <div className="middle">
        <div className="header">
          <div className="title-box">
            <div className="title-text">
              {t("dappIndexoverview.middleTitle")}
            </div>
          </div>
          {deviceType == "PC" ? (
            <div className="title-img-box">
              <img className="table-title-img" src={overviewTitle}></img>
            </div>
          ) : null}

          <div className="corner-box">

          <img className="banner-link-item" src={linkIcon1}></img>
              <img className="banner-link-item" src={linkIcon2}></img>
          </div>
        </div>
        <div className="table-box">
            <Table
              className="overview-data-table"
              columns={columns}
              locale={{ emptyText:<NoDataComp text="当前无数据" /> }}
              scroll={deviceType == "Mobile" ? { x: "max-content" } : null}
            ></Table>
        </div>
      </div>
      <div className="about-box">
        <div className="header">
          <div className="title-box">
            <div className="title-text">
              {t("dappIndexoverview.aboutTitle")}
            </div>
          </div>
          <div className="corner-box">

            <img className="icon1" src={linkIcon1}></img>
                <img className="icon2" src={linkIcon2} style={{marginLeft: 13}}></img>
          </div>
        </div>
        <div className="about-content">
          <div className="each-block">
            <div className="title">{t("dappIndexoverview.aboutTitle1")}</div>
            <div className="desc">{t("dappIndexoverview.aboutDesc1")}</div>
          </div>
          <div className="each-block">
            <div className="title">{t("dappIndexoverview.aboutTitle2")}</div>
            <div className="desc">{t("dappIndexoverview.aboutDesc2")}</div>
            <div className="sub-title">
              {t("dappIndexoverview.aboutSubTitle1")}
            </div>
            <ul className="desc-group">
              <li className="desc-item">{t("dappIndexoverview.aboutDesc3")}</li>
              <li className="desc-item">{t("dappIndexoverview.aboutDesc4")}</li>
              <li className="desc-item">{t("dappIndexoverview.aboutDesc5")}</li>
              <li className="desc-item">{t("dappIndexoverview.aboutDesc6")}</li>
              {/* <li className="desc-item">{t("dappIndexoverview.aboutDesc7")}</li> */}
            </ul>
            <div className="sub-title">
              {t("dappIndexoverview.aboutSubTitle2")}
            </div>
            <div className="desc">{t("dappIndexoverview.aboutDesc8")}</div>
            <div className="sub-title">
              {t("dappIndexoverview.aboutSubTitle3")}
            </div>
            <div className="desc">{t("dappIndexoverview.aboutDesc9")}</div>
            <div className="sub-title">
              {t("dappIndexoverview.aboutSubTitle4")}
            </div>
            <div className="desc">{t("dappIndexoverview.aboutDesc10")}</div>
            <div className="desc">{t("dappIndexoverview.aboutDesc11")}</div>
            <div className="desc">{t("dappIndexoverview.aboutDesc12")}</div>
            <div className="desc">{t("dappIndexoverview.aboutDesc13")}</div>
          </div>
          <div className="each-block">
            <div className="title">{t("dappIndexoverview.aboutTitle3")}</div>
            <div className="desc">{t("dappIndexoverview.aboutDesc14")}</div>
            <div className="desc">{t("dappIndexoverview.aboutDesc15")}</div>
          </div>
          <div className="each-block">
            <div className="title">{t("dappIndexoverview.aboutTitle4")}</div>
            <div className="desc">{t("dappIndexoverview.aboutDesc16")}</div>
            <div className="desc">{t("dappIndexoverview.aboutDesc17")}</div>
          </div>
        </div>
      </div>
      <ETFModalComp ref={ETFModalRef} />
    </div>
  );
}

export default IndexOverview;
